<template>
  <el-dialog
    v-model="dialogVisible"
    title="选择支付方式"
    width="500px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="payment-content">
      <!-- 订单信息 -->
      <div class="order-summary">
        <h3>订单信息</h3>
        <div class="summary-item">
          <span>订单号：</span>
          <span>{{ order?.id }}</span>
        </div>
        <div class="summary-item">
          <span>商品数量：</span>
          <span>{{ order?.payNum }} 件</span>
        </div>
        <div v-if="order?.discountAmount > 0" class="summary-item discount">
          <span>优惠金额：</span>
          <span>-¥{{ order?.discountAmount }}</span>
        </div>
        <div class="summary-item total">
          <span>支付金额：</span>
          <span class="amount">¥{{ order?.price }}</span>
        </div>
      </div>

      <!-- 支付方式选择 -->
      <div class="payment-methods">
        <h3>选择支付方式</h3>
        <el-radio-group v-model="selectedPayment" class="payment-options">
          <div class="payment-option">
            <el-radio label="wechat">
              <div class="payment-item">
                <img src="/images/payment/wechat.png" alt="微信支付" class="payment-icon" />
                <span class="payment-name">微信支付</span>
                <span class="payment-desc">推荐使用微信支付</span>
              </div>
            </el-radio>
          </div>
          
          <div class="payment-option">
            <el-radio label="alipay">
              <div class="payment-item">
                <img src="/images/payment/alipay.png" alt="支付宝" class="payment-icon" />
                <span class="payment-name">支付宝</span>
                <span class="payment-desc">支持花呗分期付款</span>
              </div>
            </el-radio>
          </div>
        </el-radio-group>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button 
          type="primary" 
          :loading="paying"
          :disabled="!selectedPayment"
          @click="handlePay"
        >
          {{ paying ? '支付中...' : `确认支付 ¥${order?.price}` }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { updateOrder } from '@/api/order'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  order: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const dialogVisible = ref(props.modelValue)
const selectedPayment = ref('wechat')
const paying = ref(false)

// 监听外部传入的值
watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
  if (val) {
    selectedPayment.value = 'wechat'
  }
})

// 监听内部值变化，同步到外部
watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})

// 支付
const handlePay = async () => {
  if (!props.order || !props.order.id) {
    ElMessage.error('订单信息错误')
    return
  }

  console.log('开始支付，订单信息:', props.order)
  console.log('订单ID:', props.order.id)

  paying.value = true
  try {
    // 模拟支付过程
    await new Promise(resolve => setTimeout(resolve, 2000))

    // 调用更新订单状态接口
    console.log('调用更新订单状态接口，orderId:', props.order.id)
    await updateOrder({
      orderId: props.order.id,
      orderStatus: 1 // 已付款
    })

    ElMessage.success(`${selectedPayment.value === 'wechat' ? '微信' : '支付宝'}支付成功`)
    dialogVisible.value = false
    emit('success')
  } catch (error) {
    console.error('支付失败:', error)
    ElMessage.error('支付失败，请重试')
  } finally {
    paying.value = false
  }
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped>
.payment-content {
  padding: 10px 0;
}

.order-summary {
  margin-bottom: 30px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.order-summary h3 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0 0 15px 0;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.summary-item.discount {
  color: #ff4d4f;
}

.summary-item.total {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding-top: 10px;
  border-top: 1px solid #e8e8e8;
}

.amount {
  font-size: 20px;
  color: #ff4d4f;
}

.payment-methods h3 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0 0 15px 0;
}

.payment-options {
  width: 100%;
}

.payment-option {
  margin-bottom: 15px;
}

.payment-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: all 0.3s;
}

.payment-option :deep(.el-radio__input.is-checked) + .el-radio__label .payment-item {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.payment-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.payment-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  flex: 1;
}

.payment-desc {
  font-size: 12px;
  color: #999;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 支付图标占位样式 */
.payment-icon {
  background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 12px;
}

.payment-icon::before {
  content: attr(alt);
}
</style>
